// 定义黑色主题样式
var css = `.fusioncool-html-app{background-color:rgba(25, 25, 25,1);} /*中间左边背景*/
.fusioncool-html-viewer{background-color :rgba(25, 25, 25,1)}  /*中间背景*/
.fusioncool-html-app {color :rgba(255,255,255,0.8)} /*左边菜单展开子标题字体样式*/
.fusioncool-html-inspector-props-flex-value {color :rgba(255,255,255,0.6)} /*左边字体样式*/
.fusioncool-html-files-pages-name {color:rgba(255,255,255,0.8) ;font-weight :  500 } /*左边菜单分父标题字体样式*/
.fusioncool-html-files-switch { color : rgba(255,255,255,0.8) ;font-weight :  500 }
.fusioncool-html-files-switch .next-icon:before { color:rgba(255,255,255,0.8) ;font-weight :  500 }
.fusioncool-html-files {background-color :rgba(35, 37, 39,1)}
.fusioncool-html-inspector {background-color :rgba(35, 37, 39,1)}  /*右边信息背景*/
.fusioncool-html-inspector-tabs {border-bottom :solid 1px rgba(25, 25, 25,1)}  /*右边上分割线*/
.fusioncool-html-inspector-unit {background-color :rgba(35, 37, 39,1)}  /*右边信息分割条背景*/
.fusioncool-html-inspector-props-flex {background-color :rgba(46, 48, 50,1)}  /*右边信息框背景*/
.fusioncool-html-files-artboards>li.active { background-color : #454748; color : rgba(255,255,255,0.8);}  /*右边信息复制按钮*/
.fusioncool-html-inspector-tabs ul li.active{ color :rgba(255,255,255,0.8);border-bottom :solid 1px rgba(255,255,255,0.8);}  /*右边信息复制按钮*/
.fusioncool-html-inspector-slices-wrap-total-downloads{ background-color :rgba(46, 48, 50,1);border-top :solid 1px rgba(255,255,255,0.2);}  /*右边信息复制按钮*/
.fusioncool-html-inspector-slices li{ background-color :rgba(46, 48, 50,1);border :solid 1px rgba(255,255,255,0.2);}  /*右边信息复制按钮*/
.fusioncool-html-inspector-code ul>li.active{  color :rgba(255, 255, 255,0.8);}  /*右边信息复制按钮*/
.fusioncool-html-inspector-code ul>li{ color :rgba(255, 255, 255,0.6);}  /*右边信息复制按钮*/
.fusioncool-html-files ::-webkit-scrollbar-track{background-color: rgba(35, 37, 39,1);  -webkit-box-shadow: none}
.fusioncool-html-files ::-webkit-scrollbar-thumb{background-color: rgba(255,255,255,0.1);}
.fusioncool-html-inspector-code-button{background-color:rgba(82, 54, 79,1);color:#34BBE0;border:none;}
.fusioncool-html-viewer ::-webkit-scrollbar-track{background-color: rgba(255,255,255,0.1);  -webkit-box-shadow: none; background:none;}
.fusioncool-html-viewer ::-webkit-scrollbar-thumb{background-color: rgba(255,255,255,0.1); box-shadow: none;background:none;}
::-webkit-scrollbar-track-piece {background-color:rgba(35, 37, 39,1) }
::-webkit-scrollbar-button {background-color:rgba(35, 37, 39,0) }
::-webkit-scrollbar-corner {background-color:rgba(35, 37, 39,0) }
.fusioncool-html-zoom {background-color:rgba(35, 37, 39,1) }
.fusioncool-html-viewer-scroll{opacity: 0.8;transition:opacity 0.4s;}
.fusioncool-html-viewer-scroll:hover{opacity: 1}
.fusioncool-html-inspector-gradient-color input{background-color: rgba(46, 48, 50,1);color: rgba(255,255,255,0.6);} /*右边渐变颜色背景按钮*/
`

// 定义黑白切换按钮样式
var defineCss = `
    .swkg{display: flex; width: 60px; float: right; background-color: rgba(134, 132, 255, 0.3); border-radius: 50px; height: 32px; line-height: 2.5; cursor: pointer;position: relative;margin-top: 8px;}/*开关*/
    .swkgBj{ width: 24px; height: 24px; position: absolute;top: 4px; left:4px; background-color: aliceblue; opacity: 0.8; border-radius: 50px; transition:left 0.2s;}/*开关*/
    .fusioncool-html-app>.fusioncool-html-files { position:fixed;left:0;top:0; z-index:9;opacity:0.8;}/*左边列表*/
    .fusioncool-html-app>.opened { position:initial;}/*左边列表*/
    .fusioncool-html-viewer-scroll > img {background-color:rgba(255, 255, 255,1)} /*中间图片背景色*/
    `
// .fusioncool-html-files { position:fixed;left:0;top:0; z-index:9;opacity:0.8;}/*左边列表*/
// .fusioncool-html-inspector{ position:fixed;right:0;top:0; z-index:9;opacity:0.9;}/*右边列表*/

// 定义暗色主题css标签
var style = document.createElement('style');
style.type = 'text/css';
style.id = 'darkly'
style.innerHTML = css;

// 定义jq
var jq = document.createElement('script');
jq.src = 'https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'

//插入jq
document.getElementsByTagName('head')[0].appendChild(jq);

// 定义开关结构
var code = `<div class="swkg"><div><span>🌞</span></div>
    <div><span>🌛</span></div><div class="swkgBj"></div>
    </div>`


// 延时500执行
setTimeout(function () {
    //插入开关结构
    $('.fusioncool-html-files-switch').append(code);
    //插入自定义样式
    $('body > style')[0].append(defineCss);

    // 获取localStorage 上一次保存的主题
    var theme = localStorage.getItem('theme');
    //如果缓存的主题为暗色主题则开启暗色开关状态
    if (theme != 'darkly') {
        $('.swkgBj').css('left', '30px')
    } else {
        //否则开启暗黑开关，插入暗黑样式
        $('.swkgBj').css('left', '4px')
        $('head')[0].appendChild(style);
    }

    //主题模式切换按钮
    $(".swkg").click(
        function () {
            //获取开关的位置，根据位置判断开关状态
            var swkgBj = $('.swkgBj').css('left')
            //当开关left为4px时（暗色主题）
            if (swkgBj == '4px') {
                // 则切换到白色主题，开关位置右边👉移到30px
                $('.swkgBj').css('left', '30px')
                //移除暗黑样式
                $('#darkly').remove()
                //把当前状态（白色）保存到localStorage中
                localStorage.setItem("theme", "white");
            } else {
                //否则开启暗黑开关，开关位置移动到4px的位置
                $('.swkgBj').css('left', '4px')
                //获取到 head 标签位置，并插入暗色主题标签
                $('head')[0].appendChild(style);
                //更新localStorage 中得分值
                localStorage.setItem("theme", "darkly");
            }
        }
    );

}, 500)


//拖动画布

setTimeout(function () {

    //拖动画布
    // 初始化拖放对象
    var box = $('.fusioncool-html-viewer-scroll');
    box.mouseenter(
        function () {
            var boxview = box;
            // 获取页面中被拖放元素的引用指针
            // 初始化变量，标准化事件对象
            var mx, my, ox, oy; 						// 定义备用变量
            function e(event) { 							// 定义事件对象标准化函数
                if (!event) { 							// 兼容IE浏览器
                    event = window.event;
                    event.target = boxview.srcElement.firstChild;
                    event.layerX = event.offsetX;
                    event.layerY = event.offsetY;
                }
                event.mx = event.pageX || event.clientX + document.body.scrollLeft;
                // 计算鼠标指针的x轴距离
                event.my = event.pageY || event.clientY + document.body.scrollTop;
                // 计算鼠标指针的y轴距离
                return event; 							// 返回标准化的事件对象
            }
            // 定义鼠标事件处理函数
            document.onmousedown = function (event) { 	// 按下鼠标时，初始化处理
                event = e(event);
                o = boxview;						// 获取标准事件对象
                ox = parseInt(o.css('left'));          // 拖放元素的x轴坐标
                oy = parseInt(o.css('top'));           // 拖放元素的y轴坐标
                mx = event.mx; 							// 按下鼠标指针的x轴坐标
                my = event.my; 							// 按下鼠标指针的y轴坐标
                document.onmousemove = move; 			// 注册鼠标移动事件处理函数
                document.onmouseup = stop; 				// 注册松开鼠标事件处理函数
            }
            function move(event) { 						// 鼠标移动处理函数
                event = e(event);
                o.css("left", ox + event.mx - mx + "px")
                o.css("top", oy + event.my - my + "px")
                // o.left = ox + event.mx - mx + "px";	// 定义拖动元素的x轴距离
                // o.top = oy + event.my - my + "px";	// 定义拖动元素的y轴距离
                // console.log(o.top,o.left)
            }
            function stop(event) { 							// 松开鼠标处理函数
                event = e(event);
                ox = parseInt(o.offsetLeft); 				// 记录拖放元素的x轴坐标
                oy = parseInt(o.offsetTop); 					// 记录拖放元素的y轴坐标
                mx = event.mx; 								// 记录鼠标指针的x轴坐标
                my = event.my; 								// 记录鼠标指针的y轴坐标
                o = document.onmousemove = document.onmouseup = null;
                // 释放所有操作对象
            };
        }
    )
    box.mouseleave(
        function () {
            document.onmousedown = document.onmousemove = document.onmouseup = null;
        }
    )
}, 500)
